<template>
  <div>
    <nav-bar class="navbar">
      <span slot="left" class="iconfont icon-huitui leftInfo" @click="$router.back()"></span>
      <div slot="center" class="center">登陆</div>
    </nav-bar>
    <div class="login">
      <img src="~assets/img/OIP-C.jpg" alt="">
      <div class="login-info">
        <div class="userInfo">
          <input type="text" placeholder="用户名/手机号/邮箱" v-model="username ">
        </div>
        <div class="pawInfo">
          <input type="password" placeholder="密码" v-model="password " ref="inputInfo"> <br>
          <span class="iconfont icon-quxiao pawIcon cancel" v-show="pass" @click="cancelVal"></span>

          <span class="iconfont icon-biyanjing pawIcon" v-if="isShow" @click="changeInfo"></span>
          <span class="iconfont icon-yanjing pawIcon" v-else @click="changeInfo"></span>
        </div>
        <div class="handle clearfix">
          <a href="#/register">快速注册</a>
          <span>/</span>
          <a href="#/register">忘记密码?</a>
        </div>
        <button class="loginBtn" @click="login">登录</button>
      </div>
    </div>

    <div class="link">
      <div class="otherMethod">
        <span></span>
        <span class="otherLogin">其他登录方式</span>
        <span></span>
      </div>
      <div class="methods">
        <div class="QQ" @click="handleQQ">
          <span class="iconfont icon-QQ icon"></span>
          <br>
          <span class="info">QQ</span>
        </div>
        <div class="wetche">
          <span class="iconfont icon-weixin icon iconWX"></span>
          <br>
          <span class="info">微信</span>
        </div>
      </div>
      <p>
        登录即代表您已同意
        <a href="">知心购隐私政策</a>
      </p>
    </div>

    <!-- <van-popup v-model="show" position="bottom" :style="{ height: '95%' }" closeable round close-icon-position="top-left">
      <iframe src="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1" frameborder="0"></iframe>
    </van-popup> -->
  </div>
</template>
<script>
import navBar from 'components/common/navbar/navBar'
import { handleShow } from 'utils/mixin'
import { Toast, Popup } from 'vant'
export default {
  name: '',
  data() {
    return {
      username: '',
      password: '',
      show: false
    }
  },
  components: {
    navBar,
    [Popup.name]: Popup
  },

  mixins: [handleShow],
  methods: {
    handleQQ() {

      // this.$QC.Login.showPopup({
      //   appId: '101850878',
      //   redirectURI: 'http://localhost:8080/proxy'
      // })
      // sdk 登录
      // window.location.href = 'https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1'

      // 使用网络请求登录
      window.location.href = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1'
    },
    async login() {
      let username = this.username.trim()
      let password = this.password.trim()
      if (username && password) {
        const res = await this.$require({
          url: '/user/login',
          method: 'post',
          data: {
            username,
            password
          }
        })

        if (res.status == 0) {
          // 将获取的token保存下来
          window.sessionStorage.setItem('token', res.data.token)

          this.$router.push('/user')
        }
      } else {
        return Toast('请输入用户名或密码')
      }


    }
  },

}
</script>
<style scoped lang="scss">
.navbar {
  background-color: #f6f6f6;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
}
.leftInfo {
  font-weight: bold;
  font-size: 20px;
  display: block;
}
.login {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  width: 300px;
  height: 160px;
  border: 2px solid #eee;
  border-radius: 15px;
  img {
    width: 75px;
    height: 75px;
    position: absolute;
    left: 50%;
    top: -35%;
    transform: translateX(-50%);
    border: 2px solid #f6f6f6;
    border-radius: 50%;
  }
  input {
    padding-left: 10px;
    width: 225px;
    height: 25px;
    border-radius: 10px;
    margin-bottom: 5px;
    border: 2px solid #eee;
  }
  .login-info {
    margin-top: 30px;
    padding: 0 20px;
  }
  .pawInfo {
    position: relative;
  }
  .pawIcon {
    position: absolute;
    right: 30px;
    top: 6px;
  }
  .cancel {
    right: 50px;
  }
  .handle {
    float: right;

    a {
      color: #999;
    }
    span {
      padding: 0 3px;
    }
  }
  .loginBtn {
    position: absolute;
    bottom: 10px;
    outline: none;
    width: 250px;
    height: 30px;
    border-radius: 20px;
    border: 2px solid red;
    background: red;
    color: #fff;
  }
}
.link {
  position: absolute;
  top: 60%;
  padding: 0 30px;
  color: #999;
  font-size: 12px;
  width: 300px;
  text-align: center;
  a {
    color: #409eff;
  }
  .otherMethod {
    display: flex;
    justify-content: space-between;

    span {
      flex: 1;
      height: 20px;
      border-top: 1px solid #dcdcdc;
    }
    .otherLogin {
      border: none;
      display: inline-block;
      margin-top: -8px;
    }
  }
  .methods {
    display: flex;
    width: 120px;
    height: 110px;
    margin: 0 auto;
    align-content: center;
    text-align: right;
    justify-content: space-around;
    padding: 20px 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    text-align: center;
    .QQ,
    .wetche {
      width: 60px;
      color: #999;
    }
    .icon {
      font-size: 50px;
      color: #15b8f5;
    }
    .iconWX {
      font-size: 45px;
      display: inline-block;
      padding-top: 3px;
      color: #09bb07;
    }
    .info {
      display: inline-block;
      margin-top: 8px;
    }
  }
}
iframe {
  width: 100%;
  height: 100%;
}
</style>
